<template>
  <div class="user-account-info-wrapper">
    <h2>账户信息</h2>

    <ul class="user-info-list">
      <li>
        <p class="account-info-key">邮箱 :</p>
        <p class="account-info-value">{{ userAccountInfos.email }}</p>
        <p class="account-info-edit" @click="this.editing = 'email'">
          修改邮箱
        </p>
      </li>
      <li>
        <p class="account-info-key">密码 :</p>
        <p class="account-info-value">**********</p>
        <p class="account-info-edit" @click="this.editing = 'pwd'">修改密码</p>
      </li>
    </ul>

    <pop-up :fadeIn="editing === 'pwd'">
      <user-edit-password
        :fadeOut="editing !== 'pwd'"
        @exit="editing = 'none'"
      ></user-edit-password>
    </pop-up>

    <pop-up :fadeIn="editing === 'email'">
      <user-edit-email
        :fadeOut="editing !== 'email'"
        @exit="editing = 'none'"
      ></user-edit-email>
    </pop-up>
  </div>
</template>

<script>
import PopUp from '@c/utils/PopUp.vue'
import UserEditPassword from './UserEditPassword.vue'
import UserEditEmail from './UserEditEmail.vue'

export default {
  components: {
    UserEditPassword,
    UserEditEmail,
    PopUp,
  },
  data() {
    return {
      editing: 'none',
    }
  },
  computed: {
    ...mapGetters(['userAccountInfos']),
  },
  methods: {},
}
</script>

<style lang="less" scoped>
@w: var(--userAccountInfoEditWidth);

.user-account-info-wrapper {
  box-sizing: border-box;
  flex-grow: 1;
  width: @w;
  background-color: white;

  h2,
  .user-info-list {
    padding: calc(@w * 0.015) calc(@w * 0.04);
  }

  h2 {
    line-height: 2;
    font-size: calc(@w * 0.024);
    font-weight: bold;
    color: var(--black);
    border-bottom: 1px solid var(--light);
  }

  .user-info-list {
    li {
      height: calc(@w * 0.08);
      line-height: calc(@w * 0.08);

      .account-info-key,
      .account-info-value {
        float: left;
        font-size: calc(@w * 0.022);
        color: var(--black);
        text-align: left;
      }

      .account-info-key {
        width: 20%;
      }

      .account-info-edit {
        float: right;
        font-size: calc(@w * 0.018);
        color: var(--blue);

        &:hover {
          color: red;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
